<!--  -->
<template>
  <div class="todo-header">
    <input type="text"
           placeholder="请输入你的任务名称，按回车键确认"
           @keyup.enter="addItem"
           v-model="name" />
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      name: ''
    }
  },
  props: ['addTodo'],
  methods: {
    //1.添加新的Item
    addItem () {
      // 4.判断搜索框是否为空，为空的话阻止进行，重新输入
      if (!this.name.trim()) {
        return confirm("请输入内容！")
      }
      //1.闯将一个新的对象
      const userObj = { id: Date.now(), hobby: this.name, done: true }
      //2.向APP里添加一个新的对象
      //这个addTodo方法时是从APP那边通过props传过来的
      this.addTodo(userObj);
      //3.清空搜索框
      this.name = ''
    }
  }
}
</script>


<style scoped>
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
}
</style>